<template>
  <div class="workbench-container">
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon" style="background-color: #f0f7ff;">
              <el-icon :size="36" color="#409EFF"><Document /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">128</div>
              <div class="stat-label">今日对话</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="8">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon" style="background-color: #f0f9eb;">
              <el-icon :size="36" color="#67C23A"><ChatLineRound /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">86</div>
              <div class="stat-label">解决问题</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="8">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon" style="background-color: #fdf6ec;">
              <el-icon :size="36" color="#E6A23C"><Clock /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">12.8</div>
              <div class="stat-label">平均响应(秒)</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-card class="chart-card">
      <template #header>
        <div class="card-header">
          <span>对话趋势</span>
        </div>
      </template>
      <div class="chart-container">
        <!-- 这里可以放置图表 -->
        <div class="placeholder-chart">
          <el-icon :size="48" color="#909399"><DataAnalysis /></el-icon>
          <p>对话数据图表展示</p>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import {
  Document,
  ChatLineRound,
  Clock,
  DataAnalysis
} from '@element-plus/icons-vue'
</script>

<style lang="scss" scoped>
.workbench-container {
  padding: 20px;
  
  .stat-card {
    margin-bottom: 20px;
    
    .stat-content {
      display: flex;
      align-items: center;
      
      .stat-icon {
        width: 60px;
        height: 60px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 20px;
      }
      
      .stat-info {
        .stat-value {
          font-size: 24px;
          font-weight: bold;
          margin-bottom: 5px;
        }
        
        .stat-label {
          font-size: 14px;
          color: #909399;
        }
      }
    }
  }
  
  .chart-card {
    .card-header {
      font-weight: bold;
      font-size: 16px;
    }
    
    .chart-container {
      height: 300px;
      display: flex;
      align-items: center;
      justify-content: center;
      
      .placeholder-chart {
        text-align: center;
        color: #909399;
        
        p {
          margin-top: 10px;
        }
      }
    }
  }
}
</style>